<!-- 会议室使用申请 -->
<template>
  <view>
    <view class="tab">
      <view class="tab__body">
        <view class="tab__body-item tab__body-item--active" v-if="tab === 0">
          <!-- 日历 start -->
          <Carlendar v-model="date" :isCurrentDayBeforeDisabled="true" />
          <!-- 日历 end -->

          <!-- 列表 start -->
          <view class="list-loading" v-if="loading">
            <u-loading-icon text="加载中" textSize="18"></u-loading-icon>
          </view>
          <u-list class="user-list" :scrollable="false">
            <!-- <u-list-item v-for="(item, index) in usingList" :key="`usinglist-${index}`">
              <view class="user-list__item">
                <u-avatar randomBgColor size="48" shape="circle" :text="item.carAdmin_dictText.substr(0, 1)"></u-avatar>
                <view class="user-list__info">
                  <view class="user-list__name">{{ item.carAdmin_dictText }}</view>
                  <view class="user-list__car">{{ item.carId_dictText }}</view>
                </view>
                <u-button class="user-list__button user-list__button--using">已预约</u-button>
              </view>
            </u-list-item> -->
            <u-list-item v-for="(item, index) in meetRoomData" :key="`userList-${index}`">
              <view class="user-list__item" :class="item.roomStatus == '1'? 'user-list__item--disabled' :''">
								<view
								style="color: #fff; width: 38px; height: 38px; border-radius: 50%; text-align: center;line-height: 38px;"
								:style="item.roomStatus == '1'? 'background-color: #a0cfff':'background-color: #2979ff'"
								>会</view>
                <view class="user-list__info">
                  <view
										class="user-list__name"
										:style="item.roomStatus == '1'? 'color: #a0cfff':'color: #2979ff'">{{ item.roomName }} </view>
                  <view
										class="user-list__car"
										:style="item.roomStatus == '1'? 'color: #c8c9cc':'color: #909399'">管理员：{{ item.administrator_dictText }} </view>
                </view>
								<view style="display: flex; align-items: center;">
									<u-button
									class="user-list__button"
									style="margin-right: 8px;"
									size="mini"
									:style="item.roomStatus == '1'? 'background-color: #a0cfff':'background-color: #2979ff'"
									@click="handleOrder(item, 'list')">预约情况</u-button>
									<u-button
									  class="user-list__button"
										size="mini"
										:style="item.roomStatus == '1'? 'background-color: #a0cfff':'background-color: #2979ff'"
									  @click="handleOrder(item)">立即预约</u-button>
								</view>
              </view>
            </u-list-item>
          </u-list>
          <!-- 列表 end -->
        </view>

        <view class="tab__body-item" v-if="tab === 1"></view>
      </view>
    </view>
  </view>
</template>

<script>
import moment, { unix } from 'moment'
import { mapState } from 'vuex'
import Carlendar from '@/pages/hr/components/Calendar'
import { erpMeetingReservation, erpMeetingRoomList } from '@/api/meeting/erpMeetingReservation'

export default {
  name: 'ErpMeetingReservation',
  components: { Carlendar },
  data() {
    return {
      tab: 0,
      date: new Date(),
      loading: false,
      usingList: [],
			meetRoomData: [] // 会议室信息列表
    }
  },
  onShow() {
    this.meetingRoomList()
  },
	computed: {
	  ...mapState(['userInfo']),
	},
  methods: {
		// 获取会议室信息列表
		async meetingRoomList () {
			 this.loading = await true
			const res = await erpMeetingRoomList({pageSize: -1, pageNo: 1,column: 'createTime', order: 'asc' })
			if (res.success) {
				this.meetRoomData = res.result.records.reverse() || []
			} else {
				this.meetRoomData = []
			}
			this.loading = false
		},
    handleOrder(item, type) {
      if (item.roomStatus == '1') {
				uni.showToast({
					title: '当前会议室不可用',
					icon: 'none'
				})
				return
			}
			if (type == 'list') {
				// 获取相应的数据
				// this.getList(item)
				var info = {
					date: moment(this.date).format('YYYY-MM-DD'),
					roomInfo: item,
				}
				uni.navigateTo({
				  url: `/pages/meeting/erpMeetingReservationList?info=${JSON.stringify(info)}`,
				})
			} else {
				var record = {...item }
				uni.navigateTo({
					url: `/pages/meeting/erpMeetingReservationForm?info=${JSON.stringify(record)}&type=add&date=${moment(this.date).format('YYYY-MM-DD')}`
				})
			}
    },
		// 点击已预约
		onAppointment (record) {
			if (record.useParking[0].handlerId != uni.getStorageSync('userInfo').empId) {
				uni.showToast({
					title:'暂无编辑权限！',
					icon: 'none'
				})
				return false
			}
			
			if(!!record.useParking[0] && record.useParking[0].bpmStatus !== '1' && record.useParking[0].bpmStatus !== '4') {
				// this.$refs.mettingModal.disableSubmit = true
				uni.navigateTo({
				  url: `/pages/hr/CarUserInfoForm?id=${record.useParking[0].id}&disableSubmit=true`,
				})
				
			} else {
				// this.$refs.mettingModal.disableSubmit = false
				uni.navigateTo({
				  url: `/pages/hr/CarUserInfoForm?id=${record.useParking[0].id}&disableSubmit=false`,
				})
			}
		},
    handleChangeTab(tab) {
      this.tab = tab
    },
    async getList(val) {
      try {
        this.usingList = [] // 会议室预约时间
        await erpMeetingReservation({
					beginDate: moment(this.date).format('YYYY-MM-DD'),
					endDate: moment(this.date).format('YYYY-MM-DD'),
        }).then((res) => {
					// 处理方式：
					// 1、预约情况展示的是当前选择的会议室，需要把数据循环出来
					if (res.success) {
						let resources = []
						if (res.result != null) {
							res.result.map((value, index1) => {
								// 循环会议室名称和点击的会议室是否相互匹配
								value.roomList.map((value2, index2) => {
									if (value2.id == val.id) {
										this.usingList = value2.reservationList || []
									}
								})
							})
						}
						var info = {
							date: moment(this.date).format('YYYY-MM-DD'),
							roomInfo: val,
							usingList: this.usingList
						}
						// uni.navigateTo({
						//   url: `/pages/meeting/erpMeetingReservationList?info=${JSON.stringify(info)}`,
						// })
					}
        })
      } finally {
        this.loading = false
      }
    },
  },
  watch: {
    date() {
			this.meetingRoomList()
    },
  },
}
</script>

<style lang="scss" scoped>
.tab__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rpx;
  background: #fff;
  &-item {
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 86rpx;
    color: #c6c6c6;
    font-size: 32rpx;
    &--active {
      font-weight: bold;
      color: #333333;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 6rpx;
        width: 40rpx;
        height: 4rpx;
        background: #1767fa;
        border-radius: 2rpx;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

.user-list {
  background: #fff;
  margin-top: 20rpx;
  &__item {
    height: 160rpx;
    display: flex;
    padding: 32rpx;
    align-items: center;
  }
	&__item--disabled {
    position: relative;
		/*  设置按钮点击穿透    */
		pointer-events: auto;
  }
	&__item--disabled::before {
    content: "";
		/*  设置按钮点击穿透    */
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #c8c9cc; /* 半透明黑色 */
		opacity: 0.3;
		// filter: blur(5px); /* 应用模糊效果 */
		z-index: 1; /* 确保遮罩层在内容之上 */
  }
  &__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20rpx;
  }
  &__name {
    font-size: 34rpx;
    color: #333333;
    font-weight: bold;
  }
  &__car {
    font-size: 24rpx;
    color: #7f7f7f;
  }
  &__button {
    display: inline-block;
		padding: 5px 4px;
    // width: 160rpx;
    // height: 64rpx;
    background: #1767fa;
    // padding: 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 3px;
    border: none;
    &::before,
    &::after {
      display: none;
    }
    &--using {
      background: #eeeefa;
      color: #999999;
    }
  }
	&__active {
		background: orange;
	}
}
.list-loading {
  display: flex;
  justify-content: center;
  padding-top: 20rpx;
}
</style>
